<template>
    <el-dialog
      :title="dialogTitle"
      v-model="isShow"
      :width="popupWidth"
      :before-close="handleClose">
    <el-form
        :inline="true"
        :model="value"
        ref="formRef"
        label-position="right"
        :label-width="formConfig.labelWidth"
        :rules="rules"
    >
        <slot name="formItem" />
        <div class="comFlex comWrap">
            <div v-for="(item,index) in formConfig.formItemList" :key="index">
            <el-form-item
            :label="item.label"
            :prop="item.prop"
            v-if="!item.visible"
         >
        <el-input
            style="width: 168px;"
            v-if="item.type=='input'"
            v-model="value[item.prop]"
            :disabled="item.disabled"
            :clearable="true"
            :placeholder="item.placeholder"
        ></el-input>
        <el-radio-group v-model="value[item.prop]" v-else-if="item.type == 'radio'" @change="changeRadio(value[item.prop])">
            <el-radio :value="item.value" size="large" v-for="(item,i) in item.optList" :key="i">{{ item.label }}</el-radio>
        </el-radio-group>
        <el-select
            :clearable="true"
            v-else-if="item.type=='select'"
            v-model="value[item.prop]"
            :disabled="item.disabled"
            :placeholder="item.placeholder"
            @visible-change="item.getSelectList"
            @change="changeSelect(value[item.prop])"
        >
            <el-option
                v-for="(optItem,index) in item.optList"
                :key="index"
                :label="optItem.label"
                :value="optItem.value"
            ></el-option>
            </el-select>
        <el-date-picker
            :value-format="item.dateFormate"
            v-else
            v-model="value[item.prop]"
            :type="item.type"
            :disabled="item.disabled"
            :clearable="true"
            :placeholder="item.label"
        ></el-date-picker>
        </el-form-item>
        </div>
        </div>
        
        <div class="searchBtn">
            <el-button-group>
                <el-button
                v-for="(item, index) in formConfig.operate"
                :key="index"
                size="small"
                :type="item.type"
                :icon="item.icon"
                @click="item.handleClick"
                >{{item.name}}
                </el-button>
            </el-button-group>
            <slot name="operate"></slot>
        </div>
    </el-form>
    <template #footer>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { defineProps, onMounted, ref, computed} from 'vue'
const formRef = ref(null)
const props = defineProps({
    formConfig: {
      type: Object,
      required: true
    },
    value: {
      type: Object,
      required: true
    },
    rules: {
      type: Object
    },
    dialogVisible :{
        type : Boolean,
        default : false
    },
    dialogTitle:{
        type : String,
    },
    popupWidth :{
        type : Number,
        default : 500
    },
})
const setDefaultValue = () =>{
      const formData = { ...props.value };
      // 设置默认值
      console.log('formConfig', props.formConfig);
      
        props.formConfig?.formItemList.forEach(({ key, value }) => {
        if (formData[key] === undefined || formData[key] === null) {
          formData[key] = value;
        }
      });
        emits("input", formData);
}
const emits = defineEmits(['update:dialogVisible',"input",'handleClose','save','cancel','changeRadio','changeSelect'])
const isShow = computed({
    get() {
        return props.dialogVisible;
    },
    set(val) {
        emits("update:dialogVisible", val);
    }
})
const handleClose = () => {
    emits('handleClose')
}
const changeRadio = (val) => {
    emits('changeRadio',val)
}
const changeSelect = (val) => {
    emits('changeSelect',val)
}
const save = () => {
    formRef.value.validate((valid) => {
        console.log('valid', valid);
    if (valid) {
        console.log(111);
      emits('save')
    }
  })
}
const cancel = () => {
    emits('cancel')
}
onMounted(() => {
    setDefaultValue()
})
</script>
<style scoped>
:deep(.el-select){
    width: 168px;
}
</style>